<!--  -->
<template>
  <div>
    <c-title text="粉丝列表"/>
    <van-tabs v-model="activeName" sticky line-width="16px" @change="handleClick" :offset-top="40">
      <van-tab title="粉丝">
        <template v-if="dataList[0] && dataList[0].list.length > 0">
          <div class="margin-top-10" >
            <div class="list-tabs flex-a-c padding-10 bg-fff" v-for="item in dataList[0].list" :key="item.id">
                <img :src="item.avatar" class="w-h-44" alt="">
                <div class="f-grow-1 t-l padding-left-12 padding-right-12">
                  <div class="f-14 line-clamp-2">{{ item.nickname || '用户' }}</div>
                </div>
                <div>
                  <van-button v-if="item.is_fan" round hairline plain type="primary" size="small" @click="toFollow(item.member_id,item.is_fan)" style="width: 80px;" color="var(--themeBaseColor)">
                    取消关注
                  </van-button>
                  <van-button v-else-if="item.is_anchor" round hairline plain type="primary" size="small" @click="toFollow(item.member_id,item.is_fan)" style="width: 80px;" color="var(--themeBaseColor)">
                    关注
                  </van-button>
                </div>
            </div>
          </div>
        </template>
      </van-tab>
      <van-tab title="关注">
        <template v-if="dataList[1] && dataList[1].list.length > 0">
          <div class="margin-top-10" >
            <div class="list-tabs flex-a-c padding-10 bg-fff" v-for="item in dataList[1].list" :key="item.id">
                <img :src="item.avatar" class="w-h-44" alt="">
                <div class="f-grow-1 t-l padding-left-12 padding-right-12">
                  <div class="f-14 line-clamp-2">{{ item.nickname || '用户' }}</div>
                </div>
                <div>
                  <van-button round hairline plain type="primary" size="small" @click="toFollow(item.member_id,item.is_follow)" style="width: 80px;" color="var(--themeBaseColor)">
                    {{ item.is_follow ? '取消关注' : '关注' }}
                  </van-button>
                </div>
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      activeName: 0,
      dataList: [],
      titleArr: []
    };
  },

  activated() {
    if(this.$route.params.id) {
      this.activeName = this.$route.params.id;
    }
    this.init();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    init() {
      let titleArr = [
        {
          name: "粉丝列表",
          url: "plugin.room.frontend.member.get-fans"
        },
        {
          name: "关注列表",
          url: "plugin.room.frontend.member.get-follow"
        }
      ];
      this.isLoadMore = true;
      this.titleArr = titleArr;
      this.setNewArr();
    },
    setNewArr() {
      let _dataList = [];
      this.titleArr.forEach((val, index) => {
        _dataList.push({
          url: val.url,
          isLoadMore: false,
          loading: false,
          finished: false,
          page: 1,
          total_page: 0,
          list: []
        });
      });
      this.dataList = _dataList;
      this.handleClick();
    },
    async handleClick() {
      let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, {}, ".");
      if (result == 0) return this.$toast(msg);
      this.dataList[this.activeName].list = data.data;
      this.dataList[this.activeName].isLoadMore = false;
      this.dataList[this.activeName].page = 1;
      this.dataList[this.activeName].total_page = data.last_page;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
      }
    },
    async getMoreData() {
      this.dataList[this.activeName].isLoadMore = false;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
        return;
      } else {
        this.dataList[this.activeName].page = this.dataList[this.activeName].page + 1;
        let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, { page: this.dataList[this.activeName].page }, ".");
        if (result == 0) {
          this.dataList[this.activeName].isLoadMore = false;
          this.dataList[this.activeName].page = this.dataList[this.activeName].page - 1;
          return this.$toast(msg);
        }

        this.dataList[this.activeName].list = this.dataList[this.activeName].list.concat(data.data);
        this.dataList[this.activeName].isLoadMore = false;
      }
    },
    async toFollow(uid,status) {
      let { result, msg, data } = await $http.post(
        "plugin.room.frontend.member.update-follow",
        {
          follow_type: status == 1 ? 2 : 1, //1-关注 2-取消关注
          uid: uid
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.handleClick();
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.w-h-44 {
  height: 2.75rem;
  width: 2.75rem;
  display: block;
  margin: 0;
  border-radius: 50%;
}
</style>
